import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getProfile } from "../../store/module/profileSlice";
import { useParams } from "react-router-dom";
import request from "../../request";
import ButtonInfo from "./ButtonInfo";
import { followResult } from "../../store/module/profileSlice";
import Articles from "../Articles/index";
import { articlesAuthorResult } from "../../store/module/articlesSlice";

let Profile = () => {
  const { username } = useParams();
  const dispatch = useDispatch();
  const profile = useSelector((state) => state.profile);
  const getUserInfo = () => {
    request.user.get(username).then((res) => {
      if (res.status == 1) {
        dispatch(getProfile(res.data));
      } else {
        dispatch(
          getProfile({
            errors: res.message,
          })
        );
      }
    });
  };
  const currentUser = useSelector((state) => state.login.currentUser);
  const articlesSlice = useSelector((state) => state.articlesSlice);
  const isCurrentUser = currentUser && currentUser.username == profile.username;
  useEffect(() => {
    getUserInfo();
    setTab(1);
    getAuthorResult();
    return () => {};
  }, [username, profile.username]);
  const follow = async (username) => {
    try {
      const result = await request.user.follow(username);
      dispatch(followResult(result.data));
    } catch (error) {
      dispatch(followResult({ errors: error.message }));
    }
  };

  const unfollow = async (username) => {
    try {
      const result = await request.user.unfollow(username);
      dispatch(followResult(result.data));
    } catch (error) {
      dispatch(followResult({ errors: error.message }));
    }
  };
  const getAuthorResult = () => {
    request.article.getAuthor(username, 1).then((res) => {
      console.log("我的文章", res);
      if (res.status == 1) {
        dispatch(articlesAuthorResult(res.data));
      }
    });
  };
  const getArticleByFavorite = () => {
    request.article.getFavorite(username, 1).then((res) => {
      console.log("喜欢的文章", res);
      if (res.status == 1) {
        dispatch(articlesAuthorResult(res.data));
      }
    });
  };
  let [tab, setTab] = useState(1);
  let { articles, currentPage, count } = articlesSlice;
  return (
    <div className="profile-page">
      {/* 用户的信息 */}
      <div className="user-info">
        <div className="container">
          <div className="row">
            <div className="col-md-10 offset-md-1 col-xs-12">
              {/* 用户的基本信息 头像 用户名。。。*/}
              <img
                src={profile.avatar || "http://localhost:8000/default.png"}
                style={{ width: 100, height: 100 }}
                alt=""
              />
              <h4>{profile.username}</h4>
              <p>{profile.bio}</p>
              {/* 用户的行为 自己的页面 编辑和设置 他人的页面 关注 */}
              <ButtonInfo
                follow={follow}
                unfollow={unfollow}
                profile={profile}
                isCurrentUser={isCurrentUser}
              />
            </div>
          </div>
        </div>
      </div>
      {/* 用户的文章 */}
      <div className="container">
        <div className="row">
          <div className="col-md-10 offset-md-1 col-xs-12">
            {/* 选项卡 */}
            <div className="articles-toggle">
              <ul className="nav nav-pills outline-active">
                <li className="nav-item">
                  <button
                    onClick={() => {
                      setTab(1);
                      getAuthorResult();
                    }}
                    className={tab == 1 ? "nav-link active" : "nav-link"}
                  >
                    我的文章
                  </button>
                </li>
                <li className="nav-item">
                  <button
                    onClick={() => {
                      setTab(2);
                      getArticleByFavorite();
                    }}
                    className={tab == 2 ? "nav-link active" : "nav-link"}
                  >
                    喜欢的文章
                  </button>
                </li>
              </ul>
            </div>
            {/* 文章列表 */}
            <Articles
              count={count}
              currentPage={currentPage}
              articles={articles}
              isShowPage={true}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Profile;
